<!-- 房态 -->
<template>
  <div class="flex align-center justify-between case-box" :class="pageType == 'room' ? 'padding-case' : ''">
    <template v-for="(item, index) in dataList">
      <div class="split-line" :class="windowSize == 's' ? 'margin-left-right-20' : 'margin-left-right-50'" v-if="index == 3" :key="`line${index}`"></div>
      <div class="flex align-center justify-left" :key="index">
        <img :src="item.icon" class="case-icon margin-right-15" />
        <div>
          <p class="margin-bottom-0 font-size-14">{{ item.name }}</p>
          <p class="font-size-16">
            <template v-if="index < 3">
              <span class="font-size-22 font-weight-700">{{ item.num }}</span>
              <span class="font-size-16" v-if="pageType == 'room'">m²</span>
              <span class="font-size-16" v-if="pageType == 'ad'">个</span>
              <template v-if="pageType == 'park'">
                <span class="font-size-16" v-if="index == 0">m²</span>
                <span class="font-size-16" v-else>个</span>
              </template>
            </template>

            <template v-else>
              <span class="font-size-22 font-weight-700">{{ item.num | fmoneyThousand }}</span>
              <span class="font-size-16">万元</span>
            </template>
          </p>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
  export default {
    props: {
      dataList: {
        type: Array,
        default: () => {
          return [];
        },
      },
      pageType: {
        type: String,
        default: '',
      },
    },

    data() {
      return {
        unit1:"m²",
        unit2:"m²",
        windowSize:"m"
      };
    },

    methods: {
      initWidth() {
        let windowWidth = document.body.offsetWidth;
        if (windowWidth <= 1680) {
          this.windowSize = "s"
        } else if (1680 < windowWidth && windowWidth <= 1920) {
          this.windowSize = "m"
        }
      },
    },

    mounted() {
      this.initWidth()
    },
  };
</script>
<style scoped lang="scss">
  .case-box {
    width: 100%;
    overflow: hidden;
    height: 80px;
    .split-line {
      width: 1px;
      height: 44px;
      background: #cccccc;
    }
  }
  .case-icon {
    width: 22px;
    height: 22px;
  }
  @media only screen and (max-width: 1450px) {
    .padding-case {
      padding-left: 20px;
      padding-right: 20px;
    }
  }
  @media only screen and (min-width: 1450px) {
    .padding-case {
      padding-left: 100px;
      padding-right: 100px;
    }
  }
</style>
